<template>
  <systemDialog :title="dailog.title" :width="dailog.width" :height="dailog.height" :visible="dailog.visible" @onClose="onClose" @onConfirm="confirm">
      <template v-slot:content>
        <el-form :model="formData" ref="formDataRef" :rules="rules" label-width="80px" :inline="false" size="small">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="角色名称" prop="name">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="角色备注" prop="remark">
                        <el-input v-model="formData.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </template>
  </systemDialog>
</template>
<script setup lang='ts'>
import { ref,reactive} from 'vue'
import systemDialog from '@/components/systemDialog.vue';
import userDialog from '@/hooks/userDialog';
import addRole from '@/composables/role/addRole'

// 弹框属性
const { dailog, onClose, onShow } = userDialog()

const emit = defineEmits(['save'])

// 新增/编辑弹框方法
const { confirm, show, formData, rules, formDataRef } = addRole(dailog,onShow,onClose,emit)


// 暴露方法给外部使用
// 父组件（RoleList.vue）调用子组件（addRole.vue）显示弹窗
// tableCurd.ts里的 const addRef = ref<{ show:(type:string,row?:AddUserModel) => void }>()
defineExpose({
    show
})
</script>
<style scoped lang='scss'>
</style>